<div class="section section-lg @@classes pb-0">
    <div class="container">
        <!-- Title -->
        <div class="row">
            <div class="col">
                <h2 class="h5">Default Forms</h2>
            </div>
        </div>
        <!-- End of Title -->
    </div>
</div>

<!-- Section -->
<div class="section section-lg pt-4">
    <div class="container">
        <div class="row mb-4 mb-lg-5">
            <div class="col-lg-4 col-sm-6">
                <!-- Form -->
                <div class="form-group mb-4">
                    <label for="exampleInputEmail67">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail67" aria-describedby="emailHelp">
                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <!-- End of Form -->
                <!-- Form -->
                <div class="form-group">
                    <label for="exampleInputIcon1">Icon Left</label>
                    <div class="input-group mb-4">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><span class="fas fa-search"></span></span>
                        </div>
                        <input class="form-control" id="exampleInputIcon1" placeholder="Icon Left" type="text" aria-label="Input with icon left">
                    </div>
                </div>
                <!-- End of Form -->
                <!-- Form -->
                <div class="form-group">
                    <label for="exampleInputIcon2">Icon Right</label>
                    <div class="input-group mb-4">
                        <input class="form-control" id="exampleInputIcon2" placeholder="Icon Right" aria-label="Input group" type="text">
                        <div class="input-group-append">
                            <span class="input-group-text"><span class="fas fa-search"></span></span>
                        </div>
                    </div>
                </div>
                <!-- End of Form -->
                <!-- Form -->
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <div class="input-group mb-4">
                        <input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password" aria-label="Password">
                        <div class="input-group-append">
                            <span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
                        </div>
                    </div>
                </div>
                <!-- End of Form -->
            </div>
            <div class="col-lg-4 col-sm-6">
                <!-- Form -->
                <fieldset disabled>
                    <legend class="h6">Disabled Inputs</legend>
                    <div class="form-group">
                        <label for="disabledTextInput">Name</label>
                        <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
                    </div>
                    <div class="form-group">
                        <label for="disabledSelect">Disabled select menu</label>
                        <select id="disabledSelect" class="form-control">
                        <option>Disabled select</option>
                        </select>
                    </div>
                </fieldset>
                <!-- End of Form -->
                <!-- Form -->
                <div class="form-group">
                    <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Country</label>
                    <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
                        <option selected>Choose...</option>
                        <option value="1">United States</option>
                        <option value="2">Germany</option>
                        <option value="3">Canada</option>
                    </select>
                </div>
                <!-- End of Form -->
                <!-- Form -->
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">Example textarea</label>
                    <textarea class="form-control" placeholder="Enter your message..." id="exampleFormControlTextarea1" rows="4"></textarea>
                  </div>
                <!-- End of Form -->
            </div>
            <div class="col-lg-4 col-sm-6">
                <!-- Form -->
                <div class="form-group">
                    <label for="validationServer01">First name</label>
                    <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
                    <div class="valid-feedback">
                      Looks good!
                    </div>                
                </div>
                <!-- End of Form -->
                <!-- Form -->
                <div class="form-group mb-4">
                    <label for="validationServerUsername">Username</label>
                    <input type="text" class="form-control is-invalid" id="validationServerUsername" required>
                    <div class="invalid-feedback">
                      Please choose a username.
                    </div>               
                </div>
                <!-- End of Form -->
                <!-- Form -->
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="customFile" aria-label="File upload">
                    <label class="custom-file-label" for="customFile">Choose file</label>
                </div>
                <!-- End of Form -->
            </div>
        </div>
        <h3 class="h5">Range Sliders</h3>
        <div class="row mb-4 mb-lg-5">
            <div class="col-lg-6 col-sm-6">
                <!-- Simple slider -->
                <div class="input-slider-container">
                    <div id="input-slider-forms" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
                    <!-- Input slider values -->
                    <div class="row mt-3 d-none">
                        <div class="col-6">
                            <span class="range-slider-value" data-range-value-low="200"></span>
                        </div>
                    </div>
                </div>
                <!-- End of Slider -->
            </div>
            <!-- Range slider -->
            <div class="col-lg-6 col-sm-6">
                <!-- Range slider container -->
                <div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div>
                <!-- Range slider values -->
                <div class="row d-none">
                    <div class="col-6">
                        <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span>
                    </div>
                    <div class="col-6 text-right">
                        <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span>
                    </div>
                </div>
                <!-- End of range slider values -->
            </div>
        </div>
        <div class="row mb-4 mb-lg-5">
            <div class="col-3 col-lg-2">
                <!-- Range slider container -->
                <div id="input-slider-vertical-1" data-range-value-min="100" data-range-value-max="500"></div>
                <!-- Range slider values -->
                <div class="row d-none">
                    <div class="col-6">
                        <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-3"></span>
                    </div>
                    <div class="col-6 text-right">
                        <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-3"></span>
                    </div>
                </div>
                <!-- End of range slider values -->
            </div>
            <div class="col-3 col-lg-2">
                <!-- Range slider container -->
                <div id="input-slider-vertical-2" data-range-value-min="100" data-range-value-max="500"></div>
                <!-- Range slider values -->
                <div class="row d-none">
                    <div class="col-6">
                        <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-4"></span>
                    </div>
                    <div class="col-6 text-right">
                        <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-4"></span>
                    </div>
                </div>
                <!-- End of range slider values -->
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-lg-3 col-md-6">
                <!-- Checkboxes -->
                <div class="mb-3">
                    <span class="h6 font-weight-bold">Checkboxes Square</span>
                </div>
                <div class="form-check square-check">
                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck111" checked>
                    <label class="form-check-label" for="defaultCheck111">
                      Active checkbox
                    </label>
                </div>
                <div class="form-check square-check">
                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck222">
                    <label class="form-check-label" for="defaultCheck222">
                      Option 1 
                    </label>
                </div>
                <div class="form-check square-check">
                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck333">
                    <label class="form-check-label" for="defaultCheck333">
                        Option 2 
                    </label>
                </div>
                <div class="form-check square-check">
                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck444" disabled>
                    <label class="form-check-label" for="defaultCheck444">
                      Disabled checkbox
                    </label>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <!-- Checkboxes -->
                <div class="mb-3">
                    <span class="h6 font-weight-bold">Checkboxes Round</span>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck555" checked>
                    <label class="form-check-label" for="defaultCheck555">
                      Active checkbox
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck666">
                    <label class="form-check-label" for="defaultCheck666">
                        Option 1 
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck777">
                    <label class="form-check-label" for="defaultCheck777">
                        Option 2 
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck888" disabled>
                    <label class="form-check-label" for="defaultCheck888">
                      Disabled checkbox
                    </label>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
                <!-- Radio -->
                <fieldset>
                    <legend class="h6">Radios</legend>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                        <label class="form-check-label" for="exampleRadios1">
                          Default radio
                        </label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
                        <label class="form-check-label" for="exampleRadios2">
                          Second default radio
                        </label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
                        <label class="form-check-label" for="exampleRadios3">
                          Disabled radio
                        </label>
                      </div>
                    <!-- End of Radio -->
                </fieldset>
            </div>
            <div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
                <div class="mb-3">
                    <span class="h6 font-weight-bold">Switches</span>
                </div>
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="customSwitch1">
                    <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
                    </div>
                    <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
                    <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
                </div>
            </div>
        </div>
        <div class="row mb-4 mb-lg-5">
            <div class="col-12 col-md-4">
                <!-- Form -->
                <div class="form-group">
                    <label class="h6" for="exampleInputDate1">Choose a date</label>
                    <div class="input-group mb-4">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><span class="far fa-calendar-alt"></span></span>
                        </div>
                        <input class="form-control datepicker" id="exampleInputDate1" placeholder="Select date" type="text" aria-label="Date with icon left">
                    </div>
                </div>
                <!-- End of Form -->
            </div>
            <div class="col-12 col-md-8">
                <!-- Form -->
                <div class="input-daterange datepicker row align-items-center">
                    <div class="col">
                        <label class="h6" for="exampleInputDate2">From</label>
                        <div class="form-group">
                            <div class="input-group input-group-border">
                                <div class="input-group-prepend"><span class="input-group-text"><span class="far fa-calendar-alt"></span></span></div>
                                <input class="form-control datepicker" id="exampleInputDate2" placeholder="Start date" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label class="h6" for="exampleInputDate3">To</label>
                            <div class="input-group input-group-border">
                                <div class="input-group-prepend"><span class="input-group-text"><span class="far fa-calendar-alt"></span></span></div>
                                <input class="form-control datepicker" id="exampleInputDate3" placeholder="End date" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End of Form -->
            </div>
        </div>
    </div>
</div>
<!-- End of Section -->
